<form class="ui form">
    <div class="ui grid">
        <div class="wide column">
            <div *ngIf="workflowTemplate.parameters && workflowTemplate.parameters.length > 0" class="wide field">
                <label>{{'common_parameters' | translate}}</label>
            </div>
            <ng-container *ngFor="let parameter of workflowTemplate.parameters; let index = index">
                <div class="wide fields">
                    <div class="eight wide field">
                        {{parameter.key}}<span *ngIf="parameter.required">*</span>
                    </div>
                    <div class="eight wide field" [ngSwitch]="parameter.type">
                        <input *ngSwitchDefault type="text" name="parameter-{{parameter.key}}" [(ngModel)]="parameterValues[parameter.key]"
                            (change)="changeParam()">
                        <sm-checkbox *ngSwitchCase="'boolean'" name="parameter-{{parameter.key}}" [control]="parameterValues[parameter.key]"
                            type="toggle" label=" " (change)="changeParam()"></sm-checkbox>
                        <sui-select *ngSwitchCase="'repository'" class="selection" name="parameter-{{parameter.key}}"
                            placeholder="{{'workflow_wizard_select_repo_man' | translate}}" [options]="vcsNames"
                            isSearchable="true" [(ngModel)]="parameterValues[parameter.key]" (selectedOptionChange)="fetchRepos(parameter.key, $event)"
                            #select>
                            <sui-select-option *ngFor="let vcs of select.filteredOptions" [value]="vcs">
                            </sui-select-option>
                        </sui-select>
                        <codemirror *ngSwitchCase="'json'" name="parameter-{{parameter.key}}" [(ngModel)]="parameterValues[parameter.key]"
                            [config]="codeMirrorConfig" (change)="changeParam()">
                        </codemirror>
                    </div>
                </div>
                <div class="wide fields" *ngIf="parameter.type === 'repository'">
                    <div class="eight wide field"></div>
                    <div class="four wide field">
                        <sui-select class="selection" name="parameter-{{parameter.key}}-repo" [(ngModel)]="parameterValues[parameter.key + '-repository']"
                            [options]="parameterValues[parameter.key + '-repositories']" [isSearchable]="true"
                            [optionsFilter]="filterRepo" (selectedOptionChange)="changeParam()" #repositorySelect>
                            <sui-select-option *ngFor="let repository of repositorySelect.filteredOptions" [value]="repository">
                            </sui-select-option>
                        </sui-select>
                    </div>
                    <div class="four wide field">
                        <button class="ui primary button resync" name="resync" type="button" [class.loading]="loading"
                            [disabled]="loading" (click)="resyncRepos(parameter.key)">
                            {{'btn_resync_repo' | translate }}
                        </button>
                    </div>
                </div>
            </ng-container>
        </div>
    </div>
</form>
